"use client";

import dynamic from "next/dynamic";
import { useState } from "react";
import { AutoComplete, Button, Card, Form, Input, Space } from "antd";
import { ProForm } from "@ant-design/pro-components";
import CommonFormText from "@/components/CommonFormItem/CommonFormText";
import useAutoCompleteEmail from "@/hooks/useAutoCompleteEmail";
import { User } from "@/api/user";
import { toast } from "react-toastify";

const PageContainer = dynamic(
  () => import("@ant-design/pro-layout").then(pro => pro.PageContainer),
  {
    ssr: false,
  }
);

const PersonalCenter: React.FC = () => {
  const autoCompleteCfg = useAutoCompleteEmail();
  const [formInstance] = Form.useForm<User.Info>();
  const [disabled, setDisabled] = useState(true);
  const [initialData, setInitialData] = useState<User.Info>();
  const [loading, setLoading] = useState(false);

  const onCancel = () => {
    setDisabled(true);
    formInstance.setFieldsValue(initialData || {});
  };
  const onSubmit = async () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      toast.success("提交成功");
    }, 1000);
  };

  return (
    <PageContainer>
      <Card
        bordered={false}
        styles={{
          body: {
            background: `linear-gradient(to right, #fff,#f0f2f5)`,
          },
        }}
        title="个人中心"
      >
        <ProForm<User.Info>
          submitter={false}
          autoFocusFirstInput
          layout="horizontal"
          form={formInstance}
          request={async () => {
            const { message, success, data } = await User.getUserInfo(1);
            if (!success) {
              toast.error(message);
            }
            setInitialData(data);
            return data;
          }}
          labelCol={{
            span: 6,
          }}
          style={{
            width: "100%",
            maxWidth: "400px",
          }}
          scrollToFirstError={true}
        >
          <Form.Item name="id" label="id" hidden>
            <Input />
          </Form.Item>
          <CommonFormText name="username" label="用户名" disabled required />
          <CommonFormText name="nickname" label="昵称" readonly={disabled} />
          {disabled ? (
            <CommonFormText name="email" label="邮箱" readonly={disabled} />
          ) : (
            <Form.Item
              rules={[
                {
                  required: true,
                  message: "请输入邮箱",
                },
                {
                  type: "email",
                  message: "邮箱格式不正确",
                },
              ]}
              name="email"
              label="邮箱"
            >
              <AutoComplete {...autoCompleteCfg} allowClear />
            </Form.Item>
          )}

          <CommonFormText
            name="phone"
            label="手机号"
            readonly={disabled}
            rules={[
              {
                pattern:
                  /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: "手机号格式不正确",
              },
            ]}
          />
          <div
            style={{
              textAlign: "center",
              bottom: "10px",
              left: "280px",
              marginTop: "20px",
            }}
          >
            <Space>
              {disabled && (
                <Button type="primary" onClick={() => setDisabled(false)}>
                  修改个人资料
                </Button>
              )}

              {!disabled && (
                <>
                  <Button onClick={onCancel}>取消</Button>
                  <Button type="primary" onClick={onSubmit} loading={loading}>
                    提交
                  </Button>
                </>
              )}
            </Space>
          </div>
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default PersonalCenter;
